


Dark Mode Skin That Makes Ao3 Look Like Discord

by trx



Category: AO3, Archive of Our Own, Harry Potter - J. K. Rowling, Marvel, Skin - Fandom, Skins, Sonic the Hedgehog - All Media Types, css - Fandom, dark mode
Genre: Alternate Universe, Angst, Fanfiction, Fluff, Friendship, Humor, Love, Other, Relationship(s), Romance, ao3 - Freeform
Language: English
Status: Completed
Published: 2020-04-20
Updated: 2020-07-10
Packaged: 2021-03-01 21:33:42
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 2
Words: 1,516
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/23743873
Author URL: https://archiveofourown.org/users/trx/pseuds/trx
Summary: CSS script to make your Ao3 look like Discord!This is also a Dark Mode so Ao3 stops hurting your eyes at night.
Comments: 22
Kudos: 105





	1. Chapter 1

**Author's Note:**

> HOW TO USE:
> 
> Go to "My Preferences" and then to "Skins".  
> Click "Create Site Skin".  
> Copy the CSS below into the CSS box and submit.  
> Click "Use".
> 
> If you want to return to the default skin, you can do that on the your "Skins" page as well.

#outer .region,  
#footer .group,  
.post fieldset fieldset,  
fieldset fieldset {  
background: none;  
}

body,  
.group,  
.group .group,  
.region,  
.flash,  
fieldset,  
fieldset fieldset ul,  
form dl,  
textarea,  
#main .verbose legend,  
.verbose fieldset,  
.notice,  
ul.notes,  
input,  
textarea,  
table,  
th,  
td:hover,  
tr:hover,  
.symbol .question:hover,  
#modal,  
.ui-sortable li,  
.required .autocomplete,  
.autocomplete .notice,  
.system .intro,  
.comment_error,  
div.dynamic,  
.dynamic form,  
#ui-datepicker-div,  
.ui-datepicker table {  
background: #2F3136;  
color: #eee;  
border-color: #202225;  
outline: #93A3E9;  
box-shadow: none;  
}

#header .actions a:hover,  
#header .actions a:focus,  
#header .dropdown:hover a,  
#header .open a,  
#header .menu,  
#small_login,  
#header .dropdown:hover .current + .menu,  
.group.listbox,  
fieldset fieldset.listbox,  
form blockquote.userstuff,  
input:focus,  
textarea:focus,  
li.relationships a,  
.group.listbox .index,  
.dashboard fieldset fieldset.listbox .index,  
#dashboard a:hover,  
th,  
#dashboard .secondary,  
.secondary,  
.thread .even,  
.system .tweet_list li,  
.ui-datepicker tr:hover {  
background: #2a2a2a;  
}

#header .dropdown .menu a:hover,  
#header .dropdown .menu a:focus,  
.splash .favorite li:nth-of-type(odd) a,  
.ui-datepicker td:hover,  
#tos_prompt .heading,  
#tos_prompt [disabled] {  
background: #7289da;  
}

#outer,  
.javascript,  
.statistics .index li:nth-of-type(even),  
#tos_prompt,  
.announcement input[type="submit"] {  
background: #36393F;  
}

#header ul.primary,  
#outer #footer,  
.toggled form {  
background: url("/images/skins/textures/tiles/black-noise.jpg");  
}

#header ul.primary,  
#footer,  
#dashboard ul,  
dl.meta,  
.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
form blockquote.userstuff,  
div.comment,  
li.comment,  
.toggled form,  
form dl dt,  
#inner .module .heading,  
.bookmark .status span,  
.splash .news li,  
.filters .group dt.bookmarker {  
border-color: #36393F;  
}

.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
.wrapper,  
#dashboard .secondary,  
.secondary,  
form blockquote.userstuff,  
.thread .comment,  
.toggled form {  
box-shadow: 1px 1px 3px #202225;  
}

#dashboard .current,  
.actions a:active,  
#outer .current,  
a.current,  
.current a:visited,  
span.unread,  
.replied,  
span.claimed,  
dl.index dd,  
.own,  
.draft,  
.draft .unread,  
.child,  
.unwrangled,  
.unreviewed,  
.ui-sortable li:hover {  
background: #202225;  
border-color: #36393F;  
box-shadow: -1px -1px 3px #202225;  
}

input,  
textarea {  
box-shadow: inset 0 1px 2px #202225;  
}

li.blurb,  
.blurb .blurb,  
.listbox .index,  
fieldset fieldset.listbox,  
.dashboard .listbox .index {  
box-shadow: inset 1px 1px 3px #202225;  
}

#footer a:hover,  
#footer a:focus,  
.autocomplete .dropdown ul li:hover,  
li.selected,  
a.tag:hover,  
.listbox .heading a.tag:visited:hover,  
.symbol .question,  
.qtip-content {  
background: #93A3E9;  
color: #111;  
}

.splash .favorite li:nth-of-type(odd) a:hover,  
.splash .favorite li:nth-of-type(odd) a:focus {  
background: #dcddde;  
color: #93A3E9;  
}

#header #greeting img,  
#header .heading a,  
#header .heading a:visited,  
#header .user a:hover,  
#header .user a:focus,  
#header .user .current,  
#header fieldset,  
#header form,  
#header p,  
#dashboard a:hover,  
.actions a:hover,  
.actions input:hover,  
.delete a,  
span.delete,  
span.unread,  
.replied,  
span.claimed,  
.draggable,  
.droppable,  
span.requested,  
a.work,  
.blurb h4 a:link,  
.blurb h4 img,  
.splash .module h3,  
.splash .browse li a:before,  
.required,  
.error,  
.comment_error,  
a.cloud7,  
a.cloud8,  
#footer .actions .secondary a,  
#tos_prompt .heading {  
color: #dcddde;  
}

#greeting .icon,  
#dashboard,  
#dashboard.own,  
.error,  
.comment_error,  
.LV_invalid,  
.LV_invalid_field,  
input.LV_invalid_field:hover,  
input.LV_invalid_field:active,  
textarea.LV_invalid_field:hover,  
textarea.LV_invalid_field:active,  
#header .actions .current,  
.qtip-content {  
border-color: #202225;  
}

a,  
a:link,  
a.tag,  
#header a,  
#header a:visited,  
#header .current,  
#header .primary .open a,  
#header .primary .dropdown:hover a,  
#header .primary .dropdown a:focus,  
#header #search input:focus,  
#header #search input:hover,  
#dashboard a,  
#dashboard span,  
#dashboard .current,  
.heading,  
.group .heading,  
.filters dt a:hover {  
color: #fff;  
}

a:visited,  
.actions a:visited,  
.action a:link,  
.action a:visited,  
.listbox .heading a:visited,  
span.series .divider {  
color: #93A3E9;  
}

.actions a,  
.actions a:link,  
.action,  
.action:link,  
.actions input,  
input[type="submit"],  
button,  
.current,  
.actions label,  
#header .actions a {  
background: #555;  
border-color: #222;  
color: #eee;  
box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #555;  
text-shadow: none;  
}

.actions a:hover,  
.actions input:hover,  
#dashboard a:hover,  
.actions a:focus,  
.actions input:focus,  
#dashboard a:focus {  
color: #999;  
border-color: #202225;  
box-shadow: inset 2px 2px 2px #202225;  
}

.actions a:active,  
.current,  
a.current,  
.current a:visited {  
color: #fff;  
background: #555;  
border-color: #fff;  
box-shadow: inset 1px 1px 3px #36393F;  
}

.delete a,  
span.delete {  
box-shadow: -1px -1px 2px rgba(255,255,255.25);  
}

ul.required-tags,  
.bookmark .status span,  
.blurb .icon {  
opacity: 0.9;  
border: 0;  
}

#header ul.primary,  
#outer #footer,  
.toggled form {  
background: url("/images/skins/textures/tiles/black-noise.jpg");  
}

#outer .group .heading,  
#header .actions a,  
#footer .secondary a,  
fieldset.listbox .heading,  
.userstuff .heading,  
.heading,  
.userstuff h2 {  
text-shadow: none;  
color: #fff;  
background: none;  
}

#header .actions a,  
fieldset fieldset,  
.mce-container button,  
.filters .expander {  
box-shadow: none;  
}

fieldset fieldset.listbox {  
outline: none;  
}

form dd.required {  
color: #eee;  
}

.mce-container input:focus {  
background: #F3EFEC;  
}

.announcement .userstuff a,  
.announcement .userstuff a:link,  
.announcement .userstuff a:visited:hover {  
color: #111;  
}

.announcement .userstuff a:visited {  
color: #666;  
}

.announcement .userstuff a:hover,  
.announcement .userstuff a:focus {  
color: #999;  
}

.event.announcement .userstuff a,  
.filters .expander {  
color: #eee;  
}


	2. Chapter 2

**Summary for the Chapter:**

> This is the same as above but it features a purple color instead of blue. Looks better imho!

#outer .region,  
#footer .group,  
.post fieldset fieldset,  
fieldset fieldset {  
background: none;  
}

body,  
.group,  
.group .group,  
.region,  
.flash,  
fieldset,  
fieldset fieldset ul,  
form dl,  
textarea,  
#main .verbose legend,  
.verbose fieldset,  
.notice,  
ul.notes,  
input,  
textarea,  
table,  
th,  
td:hover,  
tr:hover,  
.symbol .question:hover,  
#modal,  
.ui-sortable li,  
.required .autocomplete,  
.autocomplete .notice,  
.system .intro,  
.comment_error,  
div.dynamic,  
.dynamic form,  
#ui-datepicker-div,  
.ui-datepicker table {  
background: #2F3136;  
color: #eee;  
border-color: #202225;  
outline: #AD80EE;  
box-shadow: none;  
}

#header .actions a:hover,  
#header .actions a:focus,  
#header .dropdown:hover a,  
#header .open a,  
#header .menu,  
#small_login,  
#header .dropdown:hover .current + .menu,  
.group.listbox,  
fieldset fieldset.listbox,  
form blockquote.userstuff,  
input:focus,  
textarea:focus,  
li.relationships a,  
.group.listbox .index,  
.dashboard fieldset fieldset.listbox .index,  
#dashboard a:hover,  
th,  
#dashboard .secondary,  
.secondary,  
.thread .even,  
.system .tweet_list li,  
.ui-datepicker tr:hover {  
background: #2a2a2a;  
}

#header .dropdown .menu a:hover,  
#header .dropdown .menu a:focus,  
.splash .favorite li:nth-of-type(odd) a,  
.ui-datepicker td:hover,  
#tos_prompt .heading,  
#tos_prompt [disabled] {  
background: #AD80EE;  
}

#outer,  
.javascript,  
.statistics .index li:nth-of-type(even),  
#tos_prompt,  
.announcement input[type="submit"] {  
background: #36393F;  
}

#header ul.primary,  
#outer #footer,  
.toggled form {  
background: url("/images/skins/textures/tiles/black-noise.jpg");  
}

#header ul.primary,  
#footer,  
#dashboard ul,  
dl.meta,  
.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
form blockquote.userstuff,  
div.comment,  
li.comment,  
.toggled form,  
form dl dt,  
#inner .module .heading,  
.bookmark .status span,  
.splash .news li,  
.filters .group dt.bookmarker {  
border-color: #36393F;  
}

.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
.wrapper,  
#dashboard .secondary,  
.secondary,  
form blockquote.userstuff,  
.thread .comment,  
.toggled form {  
box-shadow: 1px 1px 3px #202225;  
}

#dashboard .current,  
.actions a:active,  
#outer .current,  
a.current,  
.current a:visited,  
span.unread,  
.replied,  
span.claimed,  
dl.index dd,  
.own,  
.draft,  
.draft .unread,  
.child,  
.unwrangled,  
.unreviewed,  
.ui-sortable li:hover {  
background: #202225;  
border-color: #36393F;  
box-shadow: -1px -1px 3px #202225;  
}

input,  
textarea {  
box-shadow: inset 0 1px 2px #202225;  
}

li.blurb,  
.blurb .blurb,  
.listbox .index,  
fieldset fieldset.listbox,  
.dashboard .listbox .index {  
box-shadow: inset 1px 1px 3px #202225;  
}

#footer a:hover,  
#footer a:focus,  
.autocomplete .dropdown ul li:hover,  
li.selected,  
a.tag:hover,  
.listbox .heading a.tag:visited:hover,  
.symbol .question,  
.qtip-content {  
background: #AD80EE;  
color: #111;  
}

.splash .favorite li:nth-of-type(odd) a:hover,  
.splash .favorite li:nth-of-type(odd) a:focus {  
background: #dcddde;  
color: #AD80EE;  
}

#header #greeting img,  
#header .heading a,  
#header .heading a:visited,  
#header .user a:hover,  
#header .user a:focus,  
#header .user .current,  
#header fieldset,  
#header form,  
#header p,  
#dashboard a:hover,  
.actions a:hover,  
.actions input:hover,  
.delete a,  
span.delete,  
span.unread,  
.replied,  
span.claimed,  
.draggable,  
.droppable,  
span.requested,  
a.work,  
.blurb h4 a:link,  
.blurb h4 img,  
.splash .module h3,  
.splash .browse li a:before,  
.required,  
.error,  
.comment_error,  
a.cloud7,  
a.cloud8,  
#footer .actions .secondary a,  
#tos_prompt .heading {  
color: #dcddde;  
}

#greeting .icon,  
#dashboard,  
#dashboard.own,  
.error,  
.comment_error,  
.LV_invalid,  
.LV_invalid_field,  
input.LV_invalid_field:hover,  
input.LV_invalid_field:active,  
textarea.LV_invalid_field:hover,  
textarea.LV_invalid_field:active,  
#header .actions .current,  
.qtip-content {  
border-color: #202225;  
}

a,  
a:link,  
a.tag,  
#header a,  
#header a:visited,  
#header .current,  
#header .primary .open a,  
#header .primary .dropdown:hover a,  
#header .primary .dropdown a:focus,  
#header #search input:focus,  
#header #search input:hover,  
#dashboard a,  
#dashboard span,  
#dashboard .current,  
.heading,  
.group .heading,  
.filters dt a:hover {  
color: #fff;  
}

a:visited,  
.actions a:visited,  
.action a:link,  
.action a:visited,  
.listbox .heading a:visited,  
span.series .divider {  
color: #AD80EE;  
}

.actions a,  
.actions a:link,  
.action,  
.action:link,  
.actions input,  
input[type="submit"],  
button,  
.current,  
.actions label,  
#header .actions a {  
background: #555;  
border-color: #222;  
color: #eee;  
box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #555;  
text-shadow: none;  
}

.actions a:hover,  
.actions input:hover,  
#dashboard a:hover,  
.actions a:focus,  
.actions input:focus,  
#dashboard a:focus {  
color: #999;  
border-color: #202225;  
box-shadow: inset 2px 2px 2px #202225;  
}

.actions a:active,  
.current,  
a.current,  
.current a:visited {  
color: #fff;  
background: #555;  
border-color: #fff;  
box-shadow: inset 1px 1px 3px #36393F;  
}

.delete a,  
span.delete {  
box-shadow: -1px -1px 2px rgba(255,255,255.25);  
}

ul.required-tags,  
.bookmark .status span,  
.blurb .icon {  
opacity: 0.9;  
border: 0;  
}

#header ul.primary,  
#outer #footer,  
.toggled form {  
background: url("/images/skins/textures/tiles/black-noise.jpg");  
}

#outer .group .heading,  
#header .actions a,  
#footer .secondary a,  
fieldset.listbox .heading,  
.userstuff .heading,  
.heading,  
.userstuff h2 {  
text-shadow: none;  
color: #fff;  
background: none;  
}

#header .actions a,  
fieldset fieldset,  
.mce-container button,  
.filters .expander {  
box-shadow: none;  
}

fieldset fieldset.listbox {  
outline: none;  
}

form dd.required {  
color: #eee;  
}

.mce-container input:focus {  
background: #F3EFEC;  
}

.announcement .userstuff a,  
.announcement .userstuff a:link,  
.announcement .userstuff a:visited:hover {  
color: #111;  
}

.announcement .userstuff a:visited {  
color: #666;  
}

.announcement .userstuff a:hover,  
.announcement .userstuff a:focus {  
color: #999;  
}

.event.announcement .userstuff a,  
.filters .expander {  
color: #eee;  
}


End file.
